{extend name="public:common"}
{block name="head"}
<style>
    .container {
        margin: 0;
        height: 8rem;
        text-align: center;
        padding-top: 8rem;
    }

    .container h1 {
        margin: 0;
    }
</style>
{/block}
{block name="content"}
<div class="mdui-color-theme container">
    <div class="mdui-container">
        <h1>上传模块</h1>
    </div>
</div>
<div class="mdui-container mdui-m-t-1">
    <div class="mdui-row">
        <div class="mdui-col-xs-12 mdui-col-sm-6 mdui-col-offset-sm-3">
            <div class="mdui-card">
                <div class="mdui-card-content">
                    <form action="{:url('save')}" method="POST">
                        <div class="mdui-textfield">
                            <label class="mdui-textfield-label">模块名称</label>
                            <input id="name" class="mdui-textfield-input" type="text" name="name" required />
                            <div class="mdui-textfield-error">模块名不能为空</div>
                            <div class="mdui-textfield-helper">模块名称应与实际名称相同</div>
                        </div>

                        <div class="mdui-textfield">
                            <label class="mdui-textfield-label">模块标识</label>
                            <input id="call" class="mdui-textfield-input" type="text" name="call_name" required />
                            <div class="mdui-textfield-error">模块标识不能为空</div>
                            <div class="mdui-textfield-helper">模块引入名将为"标识/模块名"，请确保标识名唯一</div>
                            <button type="button" id="check" class="mdui-btn mdui-m-t-1 mdui-color-blue">检查</button>
                        </div>

                        <div class="mdui-textfield">
                            <label class="mdui-textfield-label">版本号</label>
                            <input class="mdui-textfield-input" type="text" name="version" required />
                            <div class="mdui-textfield-error">版本号不能为空</div>
                            <div class="mdui-textfield-helper">版本号的构成应为x.x.x，且后两位不应超过9</div>
                        </div>

                        <div class="mdui-textfield">
                            <label class="mdui-textfield-label">上传文件</label>
                            <input id="fileBtn" class="mdui-textfield-input" type="text" name="fileName" required />
                            <input id="file" type="file" name="file" hidden>
                            <div class="mdui-textfield-error">模块文件不能为空</div>
                        </div>

                        <div class="mdui-textfield">
                            <label class="mdui-textfield-label">您的邮箱</label>
                            <input class="mdui-textfield-input" type="email" name="email" required />
                            <div class="mdui-textfield-error">请输入你的邮箱</div>
                            <div class="mdui-textfield-helper">将使用邮箱作为上传凭证</div>
                        </div>

                        <div class="mdui-m-t-1">
                            <button class="mdui-btn mdui-color-theme-accent" type="submit">提交模块</button>
                            <button class="mdui-btn mdui-color-theme" type="reset">清除</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    let $$ = mdui.JQ;

    $$(function () {
        mdui.mutation()
    });

    $$('#fileBtn').on('click', function (e) {
        $$('#file').trigger('click');
    });

    $$('#check').on('click', function () {
        $$.ajax({
            method: 'POST',
            url: '{:url("checkCallName")}',
            data: {
                name: $$('#name').val(),
                callname: $$('#call').val()
            },
            dataType: 'json',
            success: (res) => {
                if (res.code != 1) {
                    $$('#call').val(null);
                }
                mdui.snackbar(res.msg);
            }
        })
    })

    $$('#file').on('change', function (e) {
        let form = new FormData();
        form.append('file', document.getElementById("file").files[0]);

        $$.ajax({
            method: 'POST',
            url: '{:url("upload")}',
            data: form,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (res) {
                if (res.code == 1) {
                    mdui.snackbar({
                        message: '模块上传成功',
                        onOpen: function () {
                            $$('#fileBtn').val(res.data);
                        }
                    })
                } else {
                    mdui.snackbar({
                        message: res.msg
                    });
                }
            },
        });
        $$('#file').val(null);
    });

    $$('form').on('submit', function () {
        $$('button').prop('disabled', true);
        let data = $$('form').serialize();
        $$.ajax({
            method: 'POST',
            url: '{:url("save")}',
            data: data,
            dataType: 'json',
            processData: false,
            success: function (res) {
                if (res.code == 1) {
                    mdui.snackbar({
                        message: '模块上传成功',
                        onClosed: function () {
                            window.location = "{:url('index/index')}"
                        }
                    })
                } else {
                    $$('button').prop('disabled', false);
                    mdui.snackbar({
                        message: res.msg
                    });
                }
            },
        });
        return false;
    })
</script>
{/block}